<template>
  <div>
    <div class="custom-header">
      <div class="left-menu">
        <img class="logo" src="~src/assets/logo.png" alt="" />
        <div>采购平台</div>
      </div>
      <div class="right-menu">
        <div @click="openConsole">
          <!-- 控制台 -->
          <img src="~src/assets/debug.svg" alt="" />
        </div>
        <div @click="reloadWindow">
          <!-- 重载 -->
          <img src="~src/assets/reload.svg" alt="" />
        </div>
        <div @click="minimizeWindow">
          <!-- 隐藏 -->
          <img src="~src/assets/hidden.svg" alt="" />
        </div>
        <div @click="maximizeWindow">
          <!-- {{ !isFullScreen ? "全屏" : "缩小" }} -->
          <img v-show="!isFullScreen" src="~src/assets/blowup.svg" alt="" />
          <img
            v-show="isFullScreen"
            src="~src/assets/minification.svg"
            alt=""
          />
        </div>
        <div @click="closeWindow">
          <!-- 关闭 -->
          <img src="~src/assets/close.svg" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ipcRenderer } from "electron";
import { ref } from "vue";

const isFullScreen = ref(false);

const openConsole = () => {
  console.log("open-console");
  ipcRenderer.invoke("open-console");
};

const reloadWindow = () => {
  ipcRenderer.invoke("reload-window");
};

const maximizeWindow = () => {
  console.log("maximize-window");
  if (!isFullScreen.value) {
    isFullScreen.value = true;
    ipcRenderer.invoke("maximize-window", true);
  } else {
    isFullScreen.value = false;
    ipcRenderer.invoke("maximize-window", false);
  }
};
const minimizeWindow = () => {
  console.log("minimize-window");
  ipcRenderer.invoke("minimize-window");
};
const closeWindow = () => {
  console.log("close-main-window");
  ipcRenderer.invoke("close-main-window");
};
</script>

<style scoped>
.custom-header {
  -webkit-app-region: drag;
  text-align: left;
  height: 40px;
  line-height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  line-height: initial;
  padding: 0 8px;
  font-size: 13px;
  font-weight: 700;
}
.custom-header .logo {
  width: 20px;
  height: 20px;
  /* padding:10px 0 0 10px */
}
.custom-header .left-menu,
.custom-header .right-menu {
  display: flex;
  align-items: center;
}

.custom-header .right-menu img {
  width: 15px;
  height: 15px;
}

.custom-header .left-menu > div {
  margin-left: 8px;
  -webkit-app-region: no-drag;
}
.custom-header .right-menu > div {
  margin-left: 8px;
  -webkit-app-region: no-drag;
}
</style>